<template>
	<view class="pushCoil">
		<u-navbar
			back-text="推圈"
			:back-icon-size="0"
			:back-text-style="{
				color: '#101010',
				fontSize: '32rpx'
			}"
			:background="{
				background: 'transparent'
			}"
			:border-bottom="false"
		></u-navbar>
		<view class="">
			<u-tabs :list="list" :is-scroll="false" active-color="#F5222D" inactive-color="#101010" bg-color="transparent" :current="current" @change="change"></u-tabs>
		</view>
		<view class="" v-if="current === 0">
			<view class="newslist" v-if="goodsList.length > 0">
				<block v-for="(v, k) in goodsList" :key="k">
					<view class="newsli">
						<view class="top u-flex u-row-between u-col-center">
							<view class="u-flex u-row-left u-col-center">
								<image
									src="http://img-haodanku-com.cdn.fudaiapp.com/0_588459822182_1610712200.jpg"
									mode=""
									style="width: 98rpx;height: 98rpx;margin-right: 20rpx;"
								></image>
								<view class="">
									<view class="title">京推优选</view>
									<view class="time">{{ v.time }}</view>
								</view>
							</view>
							<view class="copy" @click="docopy(v, 1)">复制文案</view>
						</view>
						<view class="content">{{ v.copywriting }}</view>
						<view class="imgs u-flex u-row-between u-col-center">
							<image v-if="v.item_info.imageInfo.imageList[0]" :src="v.item_info.imageInfo.imageList[0].url" mode="" style="width: 200rpx;height: 200rpx;"></image>
							<image v-if="v.item_info.imageInfo.imageList[1]" :src="v.item_info.imageInfo.imageList[1].url" mode="" style="width: 200rpx;height: 200rpx;"></image>
							<image v-if="v.item_info.imageInfo.imageList[2]" :src="v.item_info.imageInfo.imageList[2].url" mode="" style="width: 200rpx;height: 200rpx;"></image>
						</view>
						<view class="u-flex u-row-between u-col-center gobuy" style="width: 100%;">
							<view class=""><image :src="v.item_info.imageInfo.whiteImage" mode="" style="width: 180rpx; height: 160rpx;"></image></view>
							<view class="" style="width: 440rpx;">
								<view class="u-line-1">{{ v.item_info.skuName }}</view>
								<view class="u-flex u-row-between u-col-center infos">
									<view class="">
										<view class="topprice">￥{{ v.item_info.priceInfo.lowestCouponPrice }}</view>
										<view class="bottitle">券后价</view>
									</view>
									<view class="">
										<view class="topprice">￥{{ v.item_info.commissionInfo.couponCommission }}</view>
										<view class="bottitle">返赚</view>
									</view>
									<view class="" @click="golink(v)"><image src="../../static/imgs/buy.png" mode="" style="width: 122rpx;height: 106rpx;"></image></view>
								</view>
							</view>
						</view>
						<view class="btnsbox u-flex u-row-between u-col-center">
							<view class="btns" @click="goNext(3, v)">分享赚 ￥{{ v.item_info.commissionInfo.share_commission.toFixed(2) }}</view>
							<view class="btns btns2" @click="golink(v)">
								自购省
								<text v-if="v.item_info.couponInfo.couponList[0]">￥{{ v.item_info.couponInfo.couponList[0].discount }} +</text>
								￥{{ v.item_info.commissionInfo.couponCommission }}
							</view>
						</view>
					</view>
				</block>
				<u-loadmore :status="status" margin-top="25" />
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center" style="margin-top: 240rpx;">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">暂无商品推荐</view>
				</view>
			</view>
		</view>
		<view class="" v-if="current === 1">
			<view class="newslist" v-if="marketing.length > 0">
				<block v-for="(v, k) in marketing" :key="k">
					<view class="newsli">
						<view class="top u-flex u-row-between u-col-center">
							<view class="u-flex u-row-left u-col-center">
								<image
									src="http://img-haodanku-com.cdn.fudaiapp.com/0_588459822182_1610712200.jpg"
									mode=""
									style="width: 98rpx;height: 98rpx;margin-right: 20rpx;"
								></image>
								<view class="">
									<view class="title">京推优选</view>
									<view class="time">{{ v.time }}</view>
								</view>
							</view>
							<view class="copy" @click="docopy(v, 2)">分享</view>
						</view>
						<view class="content">{{ v.source_text }}</view>
						<view class="imgs u-flex u-row-left u-col-center"><image :src="v.source_pic" mode="" style="width: 406rpx;height: 644rpx;"></image></view>
					</view>
				</block>
				<u-loadmore :status="status" margin-top="25" />
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center" style="margin-top: 240rpx;">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">暂无营销素材</view>
				</view>
			</view>
		</view>
		<view class="" v-if="current === 2">
			<view class="newslist" v-if="exchange.length > 0">
				<block v-for="(v, k) in exchange" :key="k">
					<view class="newsli cut2">
						<view class="top u-flex u-row-left u-col-center">
							<image :src="v.img" mode="" style="width: 98rpx;height: 98rpx;margin-right: 20rpx;"></image>
							<view class="">
								<view class="title">{{ v.username }}</view>
								<view class="time">{{ v.time }}</view>
							</view>
						</view>
						<view class="content">{{ v.content }}</view>
						<view class="imgs u-flex u-row-left u-col-center"><image :src="v.imgs[0]" mode="" style="width: 406rpx;height: 644rpx;"></image></view>
					</view>
					<u-line color="#E9E9E9"></u-line>
					<view class="u-flex u-row-between u-col-center botnat">
						<view class="nature borright"><text class="icon-share iconfont" style="font-size: 48rpx;color: #919191;"></text></view>
						<view class="nature borright" @click="goNext(1, v)">
							<text class="icon-msg iconfont" style="font-size: 48rpx;color: #919191;"></text>
							<text style="font-size: 32rpx;padding-left: 8rpx;">{{ v.comment }}</text>
						</view>
						<view class="nature" @click="doFabulous(v.id, k)">
							<text
								class="icon-zan iconfont"
								:style="{
									fontSize: '48rpx',
									color: v.click_id > 0 ? '#F5222D' : '#919191'
								}"
							></text>
							<text
								:style="{
									fontSize: '32rpx',
									paddingLeft: '8rpx',
									color: v.click_id > 0 ? '#F5222D' : '#919191'
								}"
							>
								{{ v.fabulous }}
							</text>
						</view>
					</view>
				</block>
				<u-loadmore :status="status" margin-top="25" />
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center" style="margin-top: 240rpx;">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">暂无交流信息</view>
				</view>
			</view>
			<view class="issue" @click="goNext(2)">
				<u-icon name="plus" color="#FBFBFB" :size="44" style label-pos="bottom" :label-size="24" label="发布" label-color="#FBFBFB"></u-icon>
			</view>
		</view>
		<view class="" v-if="current === 3">
			<view class="newslist" v-if="invitation.length > 0">
				<block v-for="(v, k) in invitation" :key="k">
					<view class="newsli">
						<view class="top u-flex u-row-between u-col-center">
							<view class="u-flex u-row-left u-col-center">
								<image
									src="http://img-haodanku-com.cdn.fudaiapp.com/0_588459822182_1610712200.jpg"
									mode=""
									style="width: 98rpx;height: 98rpx;margin-right: 20rpx;"
								></image>
								<view class="">
									<view class="title">京推优选</view>
									<view class="time">{{ v.time }}</view>
								</view>
							</view>
							<view class="copy">复制文案</view>
						</view>
						<view class="content">{{ v.source_text }}</view>
						<view class="" style="color: #FF7875;margin: 16rpx 0;font-size: 28rpx;">#点击图片获取您的专属海报</view>
						<view class="imgs u-flex u-row-left u-col-center">
							<image :src="v.source_pic" mode="" style="width: 406rpx;height: 644rpx;" @click="getCreateQrCode(v, k)"></image>
						</view>
					</view>
				</block>
				<u-loadmore :status="status" margin-top="25" />
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center" style="margin-top: 240rpx;">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">暂无邀请素材</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600" :bottom="220" :right="50"></u-back-top>
		<u-toast ref="uToast"></u-toast>
		<u-modal v-model="isshow" content="您还未登录,登录后方可正常使用" :show-cancel-button="true" confirm-text="去登陆" confirm-color="#E76E4D" @confirm="goNext(4)"></u-modal>
		<canvas canvas-id="myCanvas" :style="{ width: 1148 * scale + 'rpx', height: 2044 * scale + 'rpx', backgroundColor: '#FFFFFF' }" class="canvas-hide"></canvas>
	</view>
</template>

<script>
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	name: 'pushCoil',
	data() {
		return {
			scale: 1,
			canvasimg: '',
			qrcode: '',
			isshow: false,
			scrollTop: 0,
			page: 1,
			sourcepage: 1,
			problemPage: 1,
			status: 'loadmore',
			goodsList: [],
			marketing: [
				// {
				// 	source_pic: '',
				// 	source_text: '营销素材文案',
				// 	time: '2021-01-18 15:34:42'
				// }
			],
			invitation: [],
			exchange: [],
			list: [
				{
					name: '商品推荐'
				},
				{
					name: '营销素材'
				},
				{
					name: '交流天地'
				},
				{
					name: '邀请素材'
				}
			],
			current: 0,
			type: 1,
			islogin: false
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getRecommendGoods();
		this.getSourceList(1);
		this.getReleaseList();
		this.getSourceList(2);
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	onReachBottom() {
		this.status = 'loading';
		if (this.current === 0) {
			this.page = ++this.page;
			this.getRecommendGoods();
		} else if (this.current === 1) {
			this.sourcepage = ++this.sourcepage;
			this.getSourceList(1);
		} else if (this.current === 3) {
			this.sourcepage = ++this.sourcepage;
			this.getSourceList(2);
		}
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		this.islogin = uni.getStorageSync('token') ? true : false;
		if (uni.getStorageSync('isback')) {
			this.getReleaseList();
			uni.removeStorage({
				key: 'isback'
			});
		}
	},
	//前台进入后台
	onHide() {},
	methods: {
		getCreateQrCode(value, num) {
			this.$u.api
				.getCreateQrCode({
					path: 'pages/my/index',
					sku_id: '10022101680039',
					code: uni.getStorageSync('jxuser').my_code
				})
				.then(res => {
					// console.log('小程序码', res);
					this.qrcode = res.data.code;
					setTimeout(() => {
						this.makeimg(num);
					}, 300);
				})
				.catch(err => {
					conosle.log(err);
				});
		},
		makeimg(num) {
			let _this = this;
			// let phoneWith = this.phoneWith;
			// let scale = (phoneWith * 0.9) / 940;
			let scale = this.scale;
			// console.log(scale);

			uni.showLoading({
				mask: true,
				title: '生成中...'
			});
			// console.log(this.list[this.current]);
			let item = this.invitation[num];
			_this.downloadImages(item.source_pic, function(res) {
				// console.log(res);
				console.log('item', item);
				// item.qrcode_x = '285';
				// item.qrcode_y = '850';
				let bgimg = res;

				_this.drawPost(
					'myCanvas',
					574 * scale,
					1022 * scale,
					[
						{
							type: 'image',
							url: bgimg,
							x: 0,
							y: 0,
							width: 574 * scale,
							height: 1022 * scale,
							isCircle: false
						},
						{
							type: 'image',
							url: _this.qrcode,
							x: 216 * scale,
							y: 781 * scale,
							width: 138 * scale,
							height: 138 * scale,
							isCircle: true
						}
					],
					data => {
						console.log('---1', data);
						_this.preview();
					}
				);
			});
		},
		// canvas绘画封装
		drawPost: function(id, width, height, options, callback) {
			const ctx = uni.createCanvasContext(id);
			// ctx.setFillStyle('#FFFFFF');
			// ctx.fillStyle = '#FFFFFF';
			let that = this;
			// console.log('ctx', ctx);
			for (let i = 0; i < options.length; i++) {
				let setting = options[i];
				if (setting.type == 'image') {
					if (setting.isCircle) {
						let x = setting.x + setting.width / 2;
						let y = setting.y + setting.height / 2;
						let r = setting.height / 2;
						ctx.save();
						ctx.beginPath();
						ctx.arc(x, y, r, 0, 2 * Math.PI);
						ctx.clip();
						ctx.drawImage(setting.url, setting.x, setting.y, setting.width, setting.height);
						ctx.restore();
					} else {
						ctx.drawImage(setting.url, setting.x, setting.y, setting.width, setting.height);
					}
				} else if (setting.type == 'text') {
					let text = setting.text;
					ctx.setFontSize(setting.size);
					ctx.setFillStyle(setting.color);
					if (text.length > 22 && text.length <= 44) {
						let s_text = text.slice(0, 22);
						let e_text = text.slice(22, 44);
						ctx.fillText(s_text, setting.x, setting.y);
						ctx.fillText(e_text, setting.x, setting.y + 18 * this.scale);
						if (setting.bold) {
							for (let i = 0; i < 2; i++) {
								ctx.fillText(s_text, setting.x, setting.y);
								ctx.fillText(e_text, setting.x, setting.y + 18 * this.scale);
							}
						}
					} else if (text.length >= 45) {
						let s_text = text.slice(0, 22);
						let t_text = text.slice(22, 44);
						let e_text = text.slice(44, 67);
						ctx.fillText(s_text, setting.x, setting.y);
						ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
						ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
						if (setting.bold) {
							for (let i = 0; i < 2; i++) {
								ctx.fillText(s_text, setting.x, setting.y);
								ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
								ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
							}
						}
					} else if (text.length >= 67) {
						let s_text = text.slice(0, 22);
						let t_text = text.slice(22, 44);
						let e_text = text.slice(44, 63) + '...';
						ctx.fillText(s_text, setting.x, setting.y);
						ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
						ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
						if (setting.bold) {
							for (let i = 0; i < 2; i++) {
								ctx.fillText(s_text, setting.x, setting.y);
								ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
								ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
							}
						}
					} else {
						ctx.fillText(setting.text, setting.x, setting.y);
						if (setting.bold) {
							for (let i = 0; i < 2; i++) {
								ctx.fillText(setting.text, setting.x, setting.y);
							}
						}
					}
				} else if (setting.type == 'line') {
					ctx.setFillStyle(setting.color);
					ctx.setStrokeStyle(setting.color);
					ctx.moveTo(setting.x, setting.y);
					ctx.lineTo(setting.x + setting.width, setting.y);
					ctx.stroke();
				}
			}
			ctx.draw(true, function(e) {
				// console.log('e', e);
				uni.hideLoading();
				setTimeout(() => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 574 * that.scale,
						height: 1022 * that.scale,
						fileType: 'jpg',
						quality: 1, //质量 (0,1]
						canvasId: 'myCanvas',
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							console.log('海报生成成功!', res.tempFilePath);
							that.canvasimg = res.tempFilePath;
							callback(res.tempFilePath);
						},
						fail: function(res) {
							console.log('fail', res);
							uni.hideLoading();
							uni.showToast({
								title: '海报生成失败',
								icon: 'none'
							});
						}
					});
				}, 200);
			});
		},
		// 缓存本地
		downloadImages: function(url, callback) {
			console.log('downloadImagesurl', url);
			uni.downloadFile({
				url: url,
				success: res => {
					console.log('downloadFile', res);
					if (res.statusCode === 200) {
						callback(res.tempFilePath);
					}
				},
				fail: res => {
					uni.hideLoading();
					app.errornet('生成失败');
				}
			});
		},
		preview(index, i) {
			let that = this;
			let arr = [];
			arr.push(this.canvasimg);
			console.log(arr);
			uni.previewImage({
				urls: arr,
				current: arr[0]
			});
		},
		docopy(item, val) {
			console.log(item);
			let that = this;
			if (val === 1) {
				if (item.item_info.imageInfo.imageList[0]) {
					this.dosave(item.item_info.imageInfo.imageList[0].url);
				}
				if (item.item_info.imageInfo.imageList[1]) {
					this.dosave(item.item_info.imageInfo.imageList[1].url);
				}
				if (item.item_info.imageInfo.imageList[2]) {
					this.dosave(item.item_info.imageInfo.imageList[2].url);
				}
			}
			if (val === 2) {
				this.dosave(item.source_pic);
			}
			uniCopy({
				content: val === 1 ? item.copywriting : item.source_text,
				success: res => {
					// uni.showToast({
					// 	title: res,
					// 	icon: 'none'
					// });
					setTimeout(() => {
						that.$refs.uToast.show({
							title: '图片已保存到相册，分享文案已复制，请到微信中手动粘贴分享',
							type: 'success'
						});
					}, 300);
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		dosave(url) {
			let that = this;
			// #ifdef  MP
			console.log('-----', url);
			uni.getSetting({
				success(res) {
					uni.downloadFile({
						url: url,
						success: res => {
							if (res.statusCode === 200) {
								console.log('MP', res.tempFilePath);
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: res => {
										that.$refs.uToast.show({
											title: '保存成功',
											type: 'success'
										});
									},
									fail: err => {
										that.$refs.uToast.show({
											title: '保存失败',
											type: 'error'
										});
									}
								});
							}
						},
						fail: res => {
							that.$refs.uToast.show({
								title: '下载失败',
								type: 'error'
							});
						}
					});
				}
			});
			// #endif

			// #ifdef APP-PLUS
			uni.getImageInfo({
				src: url,
				success(image) {
					console.log('----app', image.path);
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: () => {
							// that.$refs.uToast.show({
							// 	title: '保存成功',
							// 	type: 'success'
							// });
						}
					});
				}
			});
			// #endif

			// #ifdef H5
			var canvas = document.createElement('canvas');
			var img = document.createElement('img');
			img.onload = function(e) {
				canvas.width = img.width;
				canvas.height = img.height;
				var context = canvas.getContext('2d');
				context.drawImage(img, 0, 0, img.width, img.height);
				canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
				canvas.toBlob(blob => {
					let link = document.createElement('a');
					link.href = window.URL.createObjectURL(blob);
					link.download = '';
					link.click();
				}, 'image/jpeg');
			};
			img.setAttribute('crossOrigin', 'Anonymous');
			img.src = url;
			// #endif
		},
		golink(item) {
			console.log(item);
			this.$u.api
				.doChangeLink({
					// chainType: 1,
					materialId: item.item_info.materialUrl,
					couponUrl: item.item_info.couponInfo.couponList[0] ? item.item_info.couponInfo.couponList[0].link : ''
				})
				.then(res => {
					// console.log(res);
					let link = res.data.shortURL;
					// let link = res.data.clickURL;

					console.log('转链', link);
					// console.log('跳转链接', url);
					// uni.navigateToMiniProgram({
					// 	appId: 'wx91d27dbf599dff74',
					// 	path: url,
					// 	extraData: {},
					// 	success(res) {
					// 		// 打开成功
					// 		console.log('upToTap', res);
					// 	}
					// });
					//跳转京东购物 小程序 领券页面
					wx.navigateToMiniProgram({
						appId: 'wx91d27dbf599dff74',
						path: 'pages/union/proxy/proxy?spreadUrl=' + encodeURIComponent(link),
						envVersion: 'release',
						success(res) {
							// 打开成功
							console.log('打开成功');
						}
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		doFabulous(id, k) {
			this.$u.api
				.doFabulous({
					content_id: id
				})
				.then(res => {
					console.log(res);
					this.exchange[k].click_id = 1;
					this.exchange[k].fabulous = this.exchange[k].fabulous + 1;
					this.$refs.uToast.show({
						title: '点赞成功!',
						type: 'success'
					});
				})
				.catch(err => {
					console.log(err);
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		},
		goNext(val, item) {
			switch (val) {
				case 1:
					uni.navigateTo({
						url: '/pages/pushCoil/remark?id=' + item.id
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/pushCoil/doPush'
					});
					break;
				case 3:
					// if (this.islogin) {
					uni.navigateTo({
						url: '/pages/other/goodsInfo/goodsInfo?item=' + encodeURIComponent(JSON.stringify(item.item_info)),
						animationType: 'pop-in',
						animationDuration: 300
					});
					// } else {
					// this.isshow = true;
					// }
					break;
				case 4:
					uni.switchTab({
						url: '/pages/my/index'
					});
					break;
			}
		},
		getReleaseList() {
			this.$u.api
				.getReleaseList()
				.then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.data.length; i++) {
						res.data.data[i].imgs = res.data.data[i].pic.split(',');
					}
					this.exchange.push(...res.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		getSourceList(type) {
			this.$u.api
				.getSourceList({
					type: type,
					page: this.sourcepage,
					pagesize: 20
				})
				.then(res => {
					if (res.data.data.length === 0) {
						this.status = 'nomore';
					}
					if (type === 1) {
						this.marketing.push(...res.data.data);
					} else {
						console.log('邀请素材', res);
						this.invitation.push(...res.data.data);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		getRecommendGoods() {
			this.$u.api
				.getRecommendGoods({
					page: this.page,
					pagesize: 20
					// user_id: this.user_id
				})
				.then(res => {
					console.log(res);
					if (res.data.data.length === 0) {
						this.status = 'nomore';
					}
					this.goodsList.push(...res.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		change(index) {
			this.current = index;
			// switch (index) {
			// 	case 0:
			// 		this.page = 1;
			// 		// this.getRecommendGoods();
			// 		break;
			// 	case 1:
			// 		// this.sourcepage = 1;
			// 		// this.getSourceList(1);
			// 		break;
			// 	case 2:
			// 		// this.sourcepage = 1;
			// 		// this.getReleaseList();
			// 		break;
			// 	case 3:
			// 		// this.sourcepage = 1;
			// 		// this.getSourceList(2);
			// 		break;
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.pushCoil {
	.newslist {
		margin: 40rpx 20rpx;
		.newsli {
			background-color: #ffffff;
			padding: 26rpx 34rpx;
			border-radius: 12rpx;
			margin-top: 36rpx;
			.top {
				.title {
					color: #101010;
					font-size: 28rpx;
				}
				.time {
					color: #919191;
					font-size: 24rpx;
				}
				.copy {
					width: 178rpx;
					height: 54rpx;
					line-height: 54rpx;
					background-color: rgba(249, 93, 78, 0.37);
					color: #f95d4e;
					border-radius: 60rpx;
					text-align: center;
				}
			}
			.content {
				margin-top: 26rpx;
				// min-height: 208rpx;
				color: #404040;
				font-size: 24rpx;
			}
			.imgs {
				margin: 26rpx 0;
			}
			.infos {
				.topprice {
					text-align: center;
					color: #f5222d;
					font-size: 40rpx;
				}
				.bottitle {
					text-align: center;
					color: #919191;
					font-size: 24rpx;
				}
			}
			.gobuy {
				background-color: rgba(248, 248, 249, 0.86);
				padding: 20rpx;
			}
			.btnsbox {
				margin-top: 26rpx;
				.btns {
					width: 324rpx;
					height: 64rpx;
					line-height: 64rpx;
					background-color: rgba(255, 139, 89, 0.67);
					color: rgba(98, 30, 0, 0.79);
					box-shadow: 0 4rpx 10rpx 0 rgba(255, 139, 89, 0.67);
					font-size: 26rpx;
					border-radius: 40rpx;
					text-align: center;
				}
				.btns2 {
					background-color: #f95d4e;
					color: #ffffff;
					box-shadow: 0 4rpx 12rpx 0 rgb(249, 130, 78);
					margin-left: 24rpx;
				}
			}
		}
		.cut2 {
			// padding-bottom: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
		.botnat {
			background-color: #ffffff;
			border-bottom-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
			.nature {
				width: 256rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
			}
			.borright {
				border-right: 2rpx solid #e9e9e9;
			}
		}
	}
	.issue {
		position: fixed;
		right: 40rpx;
		bottom: 100rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 78rpx;
		background-color: rgba(247, 0, 13, 0.67);
		border-radius: 50%;
		text-align: center;
	}
	.issuebox {
		margin: 46rpx 20rpx;
		.issueli {
			padding: 24rpx 44rpx;
			border-radius: 12rpx;
			background-color: #ffffff;
			margin-top: 40rpx;
			.issueleft {
				width: 70rpx;
				// height: 80rpx;
				text-align: center;
				margin-right: 16rpx;
			}
		}
	}
	.tenpro {
		background-color: #2e5882;
		border-radius: 16rpx;
		padding: 40rpx;
		margin: 40rpx 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
			margin-bottom: 28rpx;
		}
		.clicks {
			width: 190rpx;
			height: 54rpx;
			border: 100rpx;
			font-size: 28rpx;
			border-radius: 100rpx;
			background-color: #498aca;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
		}
	}
	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}
}
</style>
